HTML訓導處|嵌入YouTube影片及各項設定


Posted by itiswonderfall on 2022-06-25

前言

想要嵌入 YouTube 影片壓在底下當背景,但又不知道怎麼讓它自動播放嗎?其實嵌入時利用不同參數,就可以設定靜音、自動播放、重播⋯⋯等等眾多功能,讓你能更自由的去運用 YouTube 做變化。

圖片來源

 


 

怎麼嵌入 YouTube 影片到網頁上

Step1. 到 Youtube 上搜尋欲嵌入的影片,然後點擊影片下方的分享按鈕。

 

Step2. 點選視窗內的嵌入。

 

Step3. 複製嵌入視窗內的 HTML 原始碼。

 

Step4. 貼入原始碼就能完成嵌入影片。

 


 

添加參數即可完成多項設定

Youtube 嵌入影片 src src="https://www.youtube.com/embed/代碼" ,如果要新增設定只要在代碼後加上 ? 和參數即可,然後要同時使用多種功能,就在每組參數中用 & 隔開。

https://www.youtube.com/embed/代碼?參數1=值&參數2=值&參數3=值

 

靜音

加上參數 mute=1 即可開啟靜音功能。

https://www.youtube.com/embed/oK7ypv0szlY?mute=1

 

自動播放

這個設定比較特別,為了避免干擾網站的使用者,所以需要同時加上靜音 mute=1autoplay=1 才能開啟自動播放功能。

https://www.youtube.com/embed/oK7ypv0szlY?mute=1&autoplay=1

 

自動重播

需在同時加上 loop=1playlist=影片ID 兩個參數。

https://www.youtube.com/embed/oK7ypv0szlY?loop=1&playlist=oK7ypv0szlY

 

設定開始與結束時間

start=秒數設定開始時間,end=秒數設定結束時間,兩者可單獨或一起使用。

https://www.youtube.com/embed/oK7ypv0szlY?start=60&end=120

 


 

資料來源

如何嵌入 YouTube 影片到網站或部落格(含自動播放和重播)


#html #html訓導處 #iframe #youtube #mute #autoplay #Loop #playlist #start #end







Related Posts

How to build CICD with Jenkins as code based on container

How to build CICD with Jenkins as code based on container

CH6 Turple, List

CH6 Turple, List

滲透測試基本技術 第二章(前篇)

滲透測試基本技術 第二章(前篇)


Comments